<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import {
  ElAvatar,
  ElCard,
  ElCheckTag,
  ElDescriptions,
  ElDescriptionsItem,
  ElEmpty,
  ElResult,
  ElTag,
  ElText,
  ElTimeline,
  ElTimelineItem,
  ElTooltip,
} from 'element-plus';

const [Drawer, drawerApi] = useVbenDrawer({
  showConfirmButton: false,
  showCancelButton: false,
});
defineExpose(drawerApi);

function secondsToTime(seconds: number) {
  const date = new Date(seconds * 1000);
  const year = date.getFullYear();
  const month = `0${date.getMonth() + 1}`.slice(-2);
  const day = `0${date.getDate()}`.slice(-2);
  const hours = `0${date.getHours()}`.slice(-2);
  const minutes = `0${date.getMinutes()}`.slice(-2);
  const seconds2 = `0${date.getSeconds()}`.slice(-2);
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds2}`;
}
</script>
<template>
  <Drawer :title="$t('subscribe.drama.share.previewData')" class="w-[420px]">
    <div style="display: flex; align-items: center">
      <ElAvatar :src="drawerApi.getData().authorAvatar" size="large" />
      <div style="display: flex; flex-direction: column">
        <ElText class="mx-1" size="large">
          {{ drawerApi.getData().authorName }}
        </ElText>
        <ElTag
          effect="light"
          style="margin-top: 4px; margin-left: 8px"
          type="warning"
        >
          {{ drawerApi.getData().authorType }}
        </ElTag>
      </div>
      <div style="margin-left: auto">
        <ElTag type="success">{{ drawerApi.getData().expiredAt }}</ElTag>
      </div>
    </div>

    <ElCard shadow="always" style="margin-top: 10px">
      <ElResult
        :icon="drawerApi.getData().status ? 'success' : 'warning'"
        :sub-title="drawerApi.getData().msg"
        style="height: 1px"
      />
    </ElCard>

    <ElCard
      v-if="drawerApi.getData().fileDetailList.length > 0"
      shadow="always"
      style="margin-top: 10px"
    >
      <ElTimeline>
        <ElTimelineItem
          v-for="(activity, index) in drawerApi.getData().fileDetailList"
          :key="index"
          :hide-timestamp="true"
          :timestamp="secondsToTime(activity.seasonNum)"
        >
          <ElDescriptions :column="1" :title="activity.tmdbName">
            <ElDescriptionsItem :label="$t('subscribe.drama.share.protoName')">
              <ElTooltip :content="activity.protoName" placement="top">
                <ElCheckTag :checked="true" type="info">
                  {{
                    activity.protoName.length > 30
                      ? activity.protoName
                      : activity.protoName.slice(0, 30)
                  }}
                </ElCheckTag>
              </ElTooltip>
            </ElDescriptionsItem>
          </ElDescriptions>

          <ElDescriptions :column="2">
            <ElDescriptionsItem :label="$t('subscribe.drama.share.duration')">
              <ElCheckTag :checked="true" type="success">
                {{ activity.duration }}
              </ElCheckTag>
            </ElDescriptionsItem>
            <ElDescriptionsItem
              :label="$t('subscribe.drama.share.seasonNum')"
              :span="2"
            >
              <ElCheckTag :checked="true" type="primary">
                {{ activity.seasonNum }}
              </ElCheckTag>
            </ElDescriptionsItem>

            <ElDescriptionsItem :label="$t('subscribe.drama.share.videoFps')">
              <ElCheckTag :checked="true" type="danger">
                {{ activity.videoFps }}
              </ElCheckTag>
            </ElDescriptionsItem>
            <ElDescriptionsItem :label="$t('subscribe.drama.share.videoType')">
              <ElCheckTag :checked="true" type="warning">
                {{ activity.videoType }}
              </ElCheckTag>
            </ElDescriptionsItem>

            <ElDescriptionsItem
              :label="$t('subscribe.drama.share.videoResolution')"
            >
              <ElCheckTag :checked="true" type="primary">
                {{ activity.videoResolution }}
              </ElCheckTag>
            </ElDescriptionsItem>
          </ElDescriptions>

          <ElText type="info">{{ activity.createdAt }}</ElText>
        </ElTimelineItem>
      </ElTimeline>
    </ElCard>

    <ElCard
      v-if="drawerApi.getData().fileDetailList.length === 0"
      shadow="always"
      style="margin-top: 10px"
    >
      <ElEmpty :description="$t('subscribe.drama.share.emptyError')" />
    </ElCard>
  </Drawer>
</template>
